বুটস্ট্রাপ ৫ এ Striped Tables এবং Bordered Tables দুটি সাধারণ টেবিল স্টাইল যা ব্যবহারকারীকে টেবিলের কন্টেন্টকে আরও পরিষ্কার এবং সুসংগঠিতভাবে প্রদর্শন করতে সাহায্য করে। এই স্টাইলগুলো টেবিলের বিভিন্ন রো বা কলামকে আলাদা করে এবং টেবিলের সীমান্তকে দৃশ্যমান করে।
Striped Tables টেবিলের রো গুলিকে সাদা এবং রঙিন পরিবর্তন করে, যাতে টেবিলের তথ্য সহজে পড়া যায়। এটি বিশেষভাবে বড় টেবিল বা ডেটা ব্যবহারের ক্ষেত্রে উপকারী যেখানে ব্যবহারকারীকে তথ্য দ্রুত শনাক্ত করতে সাহায্য করে।
বুটস্ট্র্যাপ ৫ এ স্ট্রাইপড টেবিল তৈরি করতে table-striped ক্লাস ব্যবহার করতে হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Striped Table Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>ফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>2</td>
<td>মারিয়া স্মিথ</td>
<td>maria@example.com</td>
<td>987-654-3210</td>
</tr>
<tr>
<td>3</td>
<td>লুকাস ব্রাউন</td>
<td>lucas@example.com</td>
<td>456-789-0123</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
table-striped: এই ক্লাসটি টেবিলের প্রতিটি রো-এর ব্যাকগ্রাউন্ড রঙকে স্ট্রাইপ হিসেবে পরিবর্তন করে।Bordered Tables টেবিলের চারপাশে এবং সেলের মধ্যে সীমানা (বর্ডার) প্রদর্শন করে, যা টেবিলের ভিজ্যুয়াল উপস্থাপনকে আরো স্পষ্ট ও সুসংগঠিত করে তোলে। এটি বিশেষভাবে তখন উপকারী যখন অনেক কলাম বা তথ্য থাকে এবং ব্যবহারকারীকে দ্রুত তথ্য বিশ্লেষণ করতে সহায়তা করে।
বুটস্ট্র্যাপ ৫ এ বর্ডার টেবিল তৈরি করতে table-bordered ক্লাস ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bordered Table Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>ফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>2</td>
<td>মারিয়া স্মিথ</td>
<td>maria@example.com</td>
<td>987-654-3210</td>
</tr>
<tr>
<td>3</td>
<td>লুকাস ব্রাউন</td>
<td>lucas@example.com</td>
<td>456-789-0123</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
table-bordered: এই ক্লাসটি টেবিলের প্রতিটি সেল এবং টেবিলের বাইরের সীমানাকে বর্ডার দিয়ে ঘেরাটোপে আবদ্ধ করে।এছাড়া, আপনি চাইলে table-bordered এবং table-striped দুইটি ক্লাস একসাথে ব্যবহার করতে পারেন, যাতে টেবিলের প্রতিটি রো স্ট্রাইপড থাকে এবং টেবিলের প্রতিটি সেল বর্ডারযুক্ত থাকে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Striped and Bordered Table Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>ফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>2</td>
<td>মারিয়া স্মিথ</td>
<td>maria@example.com</td>
<td>987-654-3210</td>
</tr>
<tr>
<td>3</td>
<td>লুকাস ব্রাউন</td>
<td>lucas@example.com</td>
<td>456-789-0123</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
table-bordered এবং table-striped দুটি ক্লাস একসাথে ব্যবহার করা হয়েছে, যার ফলে টেবিলের সেলগুলো বর্ডারযুক্ত এবং রো গুলো স্ট্রাইপড হয়ে থাকবে।Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
